<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>常用组件</title>

</head>

<body>
<link rel="stylesheet" href="admin/css/other/exception.css"/>
<div class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-card">
            <div class="layui-card-header">常用组件</div>
            <div class="layui-card-body">
                <ul class="message-board">

                    <li>
                        <p><b>1.图形校验码</b></p>
                        <span>
                            <img id="validateImg"  style="width: 100px;height: 38px;vertical-align: middle;"
                                 src="/tool/v1/api/Captcha/img">
                            <input type="keyword" name="keyword" id="validateKey" lay-affix="clear" autocomplete="off"
                                   class="layui-input" style="width:fit-content;display:inline-block"> &nbsp;
                            <button type="button" class="layui-btn layui-btn" id="validateBtn"><i
                                    class="layui-icon"></i> 校验</button>
                            <span style="margin-left: 20px;" id="validateResult"></span>
                        </span>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['myApi'], function () {
        var $ = layui.jquery;
        var myApi = layui.myApi;

        // 加载图片
        $('#validateImg').on('click', function () {
            console.log($('#validateImg'))
            var image = document.getElementById('validateImg');
            $('#validateImg')[0].src = '/tool/v1/api/Captcha/img?' + Date.now(); // 添加时间戳避免缓存
        });

        // 执行
        $('#validateBtn').on('click', function () {
            var inputValue = $('#validateKey').val();
            console.log(inputValue)
            if ( !inputValue) {
                $('#validateResult').html('请输入验证码。')
                return;
            }
            var myData = {captcha: $('#validateKey').val()}
            myApi.get('/tool/v1/api/Captcha/check',myData, function (res) {
                if (res.data && res.data.captcha == "1") {
                    $('#validateResult').html('校验成功。')
                } else if (res.data && res.data.captcha == "-1") {
                    $('#validateResult').html('请输入验证码。')
                } else {
                    $('#validateResult').html('校验失败。')

                }
            })
        });
    })
</script>

</body>

<style>

    .message-board {
        padding: 0 10px 10px;
    }

    .message-board li {
        position: relative;
        padding: 10px 0;
        border-bottom: 1px solid #EEE;
    }

    .message-board li p {
        padding-bottom: 10px;
        padding-top: 3px;
    }

    .message-board li>span {
        color: #999;
        height: 24px;
        line-height: 24px;
    }

    .message-board .message-board-reply {
        position: absolute;
        right: 20px;
        bottom: 12px;
        height: 24px;
        line-height: 24px;
    }
</style>
</html>